<template>
  <div>
     <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
       <!-- 表单区域 -->
    <el-form :model="orderForm" label-width="80px"
      ref="orderFormRef">
      <el-form-item label="订单编号">
        <el-input v-model="orderForm.order_number" disabled></el-input>
      </el-form-item>
      <el-form-item label="是否发货">
        <p style="font-size:15px">1表示发货,0表示不发货</p>
        <el-select v-model="orderForm.is_send" placeholder="请选择">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态">
        <p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p>
        <!-- <el-input v-model="orderForm.order_pay"></el-input> -->
        <el-select v-model="orderForm.order_pay" placeholder="请选择支付方式">
            <el-option
            v-for="item in pay_option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单价格">
        <el-input v-model="orderForm.order_price"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="edit">修改订单</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 传递过来的商品id
      id: this.$route.params.id,
      // 修改订单的表单数据对象
      orderForm: {
        is_send: '',
        order_fapiao_title: '',
        order_number: '',
        order_pay: '',
        order_price: 0,
        pay_status: ''
      },
      option:[{label:'是',value:'1'},{label:'否',value:'0'}],
      pay_option:[{label:'支付宝',value:'1'},{label:'微信',value:'2'},{label:'银行卡',value:'3'},{label:'未支付',value:'0'}]
    }
  },
 
  created () {
    this.getOrderInfo()
  },
  methods: {
    // 获得订单信息
    async getOrderInfo () {
      const { data: res } = await this.$http.get('orders/' + this.id)
      this.orderForm = res.data
      console.log(this.orderForm)
    },
    // 修改订单
    async edit () {
        
        const { data: res } = await this.$http.put('orders/' + this.id, this.orderForm)
        // console.log(res)
        if (res.meta.status !== 201) {
            return this.$message.error('修改订单失败!')
        }
        console.log(res.data);
        
        this.$message.success('修改订单成功!')
        this.$router.push('/orders')
    }
  }
}
</script>

<style less="lang" scoped>

</style>

